<template>
	<view class="other-grid-container">
		<view class="other-grid-container-item" v-for="(item,index) in otherList" :key="index"
			@click="jumpRouter(item.routerPath)">
			<img :src="item.iconPath" alt="" class="other-grid-item-icon" />
			<view class="other-grid-item-title">
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "otherGrid",
		data() {
			return {
				otherList: [{
						title: '热门活动',
						iconPath: 'https://www.jk334.cn/img/hot-activity.png',
						routerPath: '/pages/Activity/Activity',
					},
					{
						title: '任务进度',
						iconPath: 'https://www.jk334.cn/img/task-schedule.png',
						routerPath: '/pages/Task/MyTask',
					},
					{
						title: '任务大厅',
						iconPath: 'https://www.jk334.cn/img/rask-hall.png',
						routerPath: '/pages/Task/Task',
					},
					{
						title: '意见反馈',
						iconPath: 'https://www.jk334.cn/img/feedback.png',
						routerPath: '/pages/Feedback/Feedback',
					},
					{
						title: '用户协议',
						iconPath: 'https://www.jk334.cn/img/user.png',
						routerPath: '/pages/Deal/Deal',
					},
				]
			};
		},
		methods: {
			jumpRouter(data) {
				if (!data) return
				uni.navigateTo({
					url: data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.other-grid-container {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		/* 第一排有4个盒子 */
		grid-gap: 2rpx;
		/* 盒子之间的间距 */
	}

	.other-grid-container-item {
		// width: calc(25% - 4rpx);
		/* 每个盒子宽度为四分之一，并考虑间距 */
		margin-top: 64rpx;
		/* 盒子之间的间距 */
		/* 让 padding 不会增加盒子的实际宽度 */
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-family: PingFang SC-Regular;
		font-size: 24rpx;
		color: #323232;

		.other-grid-item-icon {
			width: 48rpx;
			height: 48rpx;
			margin-bottom: 20rpx;
		}
	}
</style>